jQuery(document).ready(function($){

    //partie drag and drop
    
    var dropbox = document.getElementById("dropbox");
    //Variable temporaire qui stocke les fichiers
    var tabImg = new Array();
    
    //Initialisation des event handlers
    dropbox.addEventListener("dragenter", dragEnter, false);
    dropbox.addEventListener("dragexit", dragExit, false);
    dropbox.addEventListener("dragover", dragOver, false);
    dropbox.addEventListener("drop", drop, false);
    

    $("#update-article").hide();

    /**
     *
     */
    $.get("/BlogWS/resources/article/0/5",function(data){
        var i = 0;
        $(data).each(function(){
            i++
            $("#list-article").prepend(renderItem(this.id, this.titre, this.content, this.time, this.image));
        });
        if(i==0)
            showWelcome();
        
        if(removeLoadMore()){
            $("#loadmore").remove();
            console.log("DELETE");
        }else
        {
            console.log("INSERT");
            $("<div id='loadmore'><a href='#' id='load' >J'en veux plus !</a></div>").insertAfter("#list-article");
        }
    },"json");
    
    
    /**
     * 
     */
    $("#write").live('click',function(){
       //var data = $("#form-article").serializeArray();
       var fd = new FormData();
       console.log($("#new-titre").val());
       console.log($("#new-content").val());
       fd.append("titre", $("#new-titre").val());
       fd.append("content", $("#new-content").val());
       for(i in tabImg){
           console.log(tabImg[i]);
           fd.append("image"+i, tabImg[i]);
       }
       
       $.ajax({
          type:"POST",
          url: "/BlogWS_Version_Test/resources/article",
          data: fd,
          cache : false,
          contentType : false,
          processData : false,
          success : function plop(data){console.log("Envoi de fichier reussit !!\n");},
          error: function(data){
              console.log("error");
          }
       });
       
       $("#welcome").remove();
       
        if(removeLoadMore()){
            $("#loadmore").remove();
        }
    });


    /**
     *
     */
    $(".delete").live("click",function(){
        var id = $(this).attr("href");
        console.log(id);

        $.ajax(id,
        {
            type:"DELETE",
            success: function(d){
                $("#article-"+d).slideUp('slow',function(){$(this).remove()});
            }
        });
        
        if(removeLoadMore()){
            $("#loadmore").remove();
        }
        return false;

    });
    
    
    /**
     *
     */
    $(".title").live("click",function(){
        var url = $(this).attr("href");

        $(document).scrollTop($(document).height());

        $.get(url,function(data){

            $("#formupdate-article #titre").val(data.titre);
            $("#formupdate-article #content").val(data.content);
            $("#formupdate-article #id").val(data.id);
            $("#formupdate-article #image").val(data.image);

            $("#write-article").hide();
            $("#update-article").show();
        });
        
        if(removeLoadMore()){
            $("#loadmore").remove();
        }

        return false;
    });


    /**
     * Requete qui gère la mise à jour de la base de donnée et met à jour la page
     */
    $("#update").live("click",function(){

        var data = $("#formupdate-article").serializeArray();
        console.log(data);
        
        $.ajax({
            url: "/BlogWS/resources/article",
            type:"PUT",
            data: data,
            success: function(d){
                $("#formupdate-article").each(function(){
                    this.reset();
                });

                updateRenderedItem(d.id, d.titre, d.content, d.time, d.image)

                $("#update-article").hide();
                $("#write-article").show();

            }

        });

        if(removeLoadMore()){
            $("#loadmore").remove();
        }
    });


    /**
     * Requete de chargement des articles
     */
    $("#load").live("click",function(){
        $("#loadmore").remove();
        var count = $("#list-article").children().length;
        var limit = count+5;

        $.get("/BlogWS/resources/article/"+count+"/"+limit,function(data){
          

            $(data).each(function(){
               
                $("#list-article").append(renderItem(this.id, this.titre, this.content, this.time, this.image));
            });
            if(removeLoadMore()){
                $("#loadmore").remove();
            }else{
                $("<div id='loadmore'><a href='#' id='load' >J'en veux plus !</a></div>").insertAfter("#list-article");
            }
        },"json");
    });
    
    
    /**
     * Liste des fonctions utilisé dans les requêtes jquery
     */
    function removeLoadMore()
    {
        $.get("/BlogWS/resources/article/count",function(data){
            var i = $("#list-article").children().length;
            console.log("dans la bd : "+data+" | sur le site : "+i);
           if(data == i){
               return true;
           }else
               return false;
        });
    }

    function renderItem(id, titre, content, date, image)
    {
        console.log(image);
        var myDate = new Date(date);
        var strDate = "";
        strDate += myDate.getUTCDate()+"/"+myDate.getMonth()+"/"+myDate.getFullYear();
        strDate += " à "+myDate.getHours()+":"+myDate.getMinutes();
        return "<div class='article' id='article-"+id+"'>\
                <h2>"+titre+"</h2></a>\
                <p class='content'>"+content+"</p>\n\
                <p class='image'><img src='"+image+"' alt='[ No picture ]'/></p>\
                <div class='postmeta'>\n\
                    <p class='alignleft'>Article publi&eacute; le "+strDate+"</p>\n\
                    <p class='alignright'>\n\
                        <a class='button blue delete' href='/BlogWS/resources/article/"+id+"'>Supprimer</a>\n\
                        <a href='/BlogWS/resources/article/"+id+"' class='button blue title'>Modifier</a>\
                    </p></div>\n\
                    <div class='clearfix'></div>\
                </div>";
    }

    function updateRenderedItem(id, titre, content)
    {
        console.log(id);

        $("#article-"+id+" h2").html(titre);
        $("#article-"+id+" .title").attr("rel","/BlogWS/resources/article/"+id);
        $("#article-"+id+" .content").html(content);

        $("#article-"+id).css("background-color","#E3F6CE");
        window.setTimeout(function() {  
            $("#article-"+id).css("background-color","white");
        }, 1000);
    }
    
    function showWelcome(){
        $("#list-article").html("<div id='welcome'>Aucun article n'est présent.<br />Voulez-vous &ecirc;tre le premier ?</div>");
    }
    
    function dragEnter(evt) {
	evt.stopPropagation();
	evt.preventDefault();
    }

    function dragExit(evt) {
	evt.stopPropagation();
	evt.preventDefault();
    }

    function dragOver(evt) {
	evt.stopPropagation();
	evt.preventDefault();
    }

    function drop(evt) {
	evt.stopPropagation();
	evt.preventDefault();

	var files = evt.dataTransfer.files;
	var count = files.length;

	// Only call the handler if 1 or more files was dropped.
	if (count > 0)
		handleFiles(files);
    }

    /**
     * Fonction qui gère l'entrée de plusieurs fichiers
     */
    function handleFiles(files) {
        //On ajouter les fichiers reçu à la variable temporaire
        imgList =  files;
        for(var i = 0 ; i < files.length; i++){
            var file = files[i];

            document.getElementById("droplabel").innerHTML = "Processing " + file.name;

            var reader = new FileReader();

            // init the reader event handlers
            reader.onprogress = handleReaderProgress;
            reader.onloadend = handleReaderLoadEnd;

            // begin the read operation
            reader.readAsDataURL(file);
            tabImg.push(file);
        }
    }

    function handleReaderProgress(evt) {
	if (evt.lengthComputable) {
		var loaded = (evt.loaded / evt.total);
	}
    }

    function handleReaderLoadEnd(evt) {
	var img = document.createElement("img");
	img.src = evt.target.result;
        $("#list-image").append(img);
    }
});

/**
function handleReaderLoad(evt) {
             var img = document.getElementById("preview");
             var nouvelleImage = "<img src='"+evt.target.result+"' class='imagePreview' width=50px height=50px/>";
             $("#list-image").append(nouvelleImage);
             //$("#list-image").show('slow');
           }

           function filesProcess(files) {
               var file = files[0];

               document.getElementById("droplabel").innerHTML = "Processing " + file.name;
               
               var reader = new FileReader();
               
               // init the reader event handlers
               reader.onload = handleReaderLoad;
               
               // begin the read operation
               reader.readAsDataURL(file);

               tabImg.push(file);
           }
           */